import React, { useState, useEffect } from 'react';
import styles from './NewStyles.module.css';
import { NavBar, Space, Toast } from 'antd-mobile';
import { UserAddOutline, } from 'antd-mobile-icons';
import http from '../utils/http';
import { useNavigate } from 'react-router-dom';


export default function Friends() {
  const navigate = useNavigate();
  
  const handleFollowToggle = async (id) => {
    const res = await http.post(`/changeIsguanzhu?id=${id}`, {
      id: id,
      isguanzhu: false
    })
    const updateStatus = followedFensi.filter(item => item._id !== id)
    setFollowedFensi(updateStatus)
  };

  const [followedFensi, setFollowedFensi] = useState([])
  const getlist = async () => {
    const res = await http.get('/friend')
    setFollowedFensi(res.data.data)
  }
  useEffect(() => {
    getlist()
  }, [])

  return (
    <div>
      <div className={styles.pageHeader}> 
        <NavBar 
          // backArrow={<ArrowLeftOutline />}
          onBack={() => navigate('/my')}
        >
          烦
        </NavBar>
        <span className={styles.yhadd}><UserAddOutline /></span>
      </div>
      
      <h2 className={styles.pageTitle}>关注的朋友</h2>
      
      <div className={styles.friendsList}>
        {followedFensi.filter(item => item.isguanzhu == true).length > 0 ? (
          followedFensi.filter(item => item.isguanzhu == true).map((friend, index) => (
            <div key={friend._id} className={styles.FriendsItem}>
              <img src={friend.avatar || '1.jpg'} alt={friend.name} className={styles.avatarfriend} />
              <div className={styles.friendInfo}>
                <h3>{friend.name}</h3>
                <p>{friend.desc}</p>
              </div>
              <button onClick={() => handleFollowToggle(friend._id)}>
                互相关注
              </button>
            </div>
          ))
        ) : (
          <div className={styles.emptyState}>
            <p>暂无关注</p>
          </div>
        )}
      </div>
    </div>
  );
};



